<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../../common/css/gobal.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../../common/css/animate.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" media="all" />
    <style type="text/css">
        .user-tables{padding-top: 0px;}
    </style>
</head>
<body>
<div class="layui-fluid cms-wrapper">
    <div class="layui-row animated bounceIn">

            <fieldset class="layui-elem-field layui-field-title">
                <legend><a name="color-design">用户管理</a></legend>
            </fieldset>
            <div class="layui-btn-group" id="cms_group">
                <button class="layui-btn" data-type="add"><i class="layui-icon">&#xe61f;</i><cite>增加用户</cite></button>
                <button class="layui-btn layui-btn-normal" data-type="edit"><i class="layui-icon">&#xe642;</i><cite>修改用户</cite></button>
                <button class="layui-btn layui-btn-danger" data-type="del"><i class="layui-icon">&#xe640;</i><cite>删除用户</cite></button>
            </div>

        <div class="user-tables">
             <table id="userTables" lay-filter="userTables"></table>
        </div>
    </div>
</div>
<script type="text/html" id="userbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="shouquan">授权</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="disable">禁用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 加载js文件 -->
<script type="text/javascript" src="../../common/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'form', 'table', 'common'], function() {
        var $      = layui.$,
            layer  = layui.layer,
            form   = layui.form,
            table  = layui.table,
            common = layui.common;

        var tableIns = table.render({
            elem: '#userTables',
            cols: [
                [
                    {checkbox : true,width : 60,fixed : true},
                    {field : 'id',width : 80,title : 'ID',sort  : true},
                    {field : 'username',minWidth : 150,title : '用户名',align : 'center'},
                    {field : 'group',width : 150,title : '用户组',align : 'center',},
                    {field : 'phone',width : 150,title : '手机号',align : 'center'},
                    {field : 'status',width : 150,title : '状态',align : 'center'},
                    {field : 'lastip',width : 150,title : '最后一次登录ip',align : 'center'},
                    {field : 'lasttime',width : 150,title : '上一次登录时间',align : 'center'},
                    {title : '常用操作',width : 260,align : 'center',toolbar : '#userbar',fixed : 'right'}
                ]
            ],
            url  : '../../datas/user.json',
            page : true,
            even : true,
        });

        //监听工具条
        table.on('tool(userTables)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }else if (obj.event === 'shouquan') {
                layer.alert('授权行：<br>' + JSON.stringify(data))
            }else if (obj.event === 'disable') {
                layer.alert('禁用行：<br>' + JSON.stringify(data))
            }else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        var active = {
            add:function(){
                common.larryCmsMessage('最近好累，还是过段时间在写吧！','error');
            },
            edit:function(){
                common.larryCmsMessage('最近好累，还是过段时间在写吧！','error');
            },
            del:function(){
                var checkStatus = table.checkStatus('userTables'),data = checkStatus.data;
                if (data.length == 0) {
                    common.larryCmsMessage('你没有选择对象','error');
                } else {
                    layer.alert(JSON.stringify(data));
                }
            }

        };
        $('#cms_group .layui-btn').on('click',function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>